<template>
  <div class="coat">
    <el-container>
      <el-header class="theHeader" height="80px">
        <div class="buttonBox">
          <div @click="forwardTo('/unit')"><img src="@/assets/images/unitStatBlue.png" alt=""></div>
          <div @click="forwardTo('/cars')"><img src="@/assets/images/carsStatBlue.png" alt=""></div>
          <div @click="forwardTo('/company')"><img src="@/assets/images/companyStatBlue.png" alt=""></div>
        </div>
        <div class="buttonBox">
          <div @click="forwardTo('/dispatch')"><img src="@/assets/images/dispatchStatBlue.png" alt=""></div>
          <div @click="forwardTo('/expense')"><img src="@/assets/images/expenseStatOrange.png" alt=""></div>
        </div>
      </el-header>
      <el-container class="upperContainer">
        <el-main>
          <div class="theBlock">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">维保费用统计</span>
              </template>
              <template #last>
                <span class="theLast">车辆维保费用统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0,132,243,0), rgba(0,132,243,0.1));">
              <TagsPie :data=dataCarsMaintenance />
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">油电费用统计</span>
              </template>
              <template #last>
                <span class="theLast">车辆油电费用统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <TagsPie :data=dataCarsFuel />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
        <el-main class="middleMain">
          <div class="middleTagBox">
            <el-date-picker :clearable="false" :prefix-icon="PointerDown" class="middleSelect" :editable="false"
              v-model="dateStart" type="date" placeholder="开始日期" value-format="x">
            </el-date-picker>
            <el-date-picker :clearable="false" :prefix-icon="PointerDown" class="middleSelect" :editable="false"
              v-model="dateEnd" type="date" placeholder="结束日期" value-format="x">
            </el-date-picker>
            <el-select :suffix-icon="PointerDown" :teleported="false" class="middleSelect" v-model="middleSelect"
              value-key="" placeholder="地区" @change="">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="expenseMiddle">
            <div class="middleNumber">
              <span class="middleNumberTitleExpense">费用总计</span>
              <span style="font-size: 50px;color: #fff;">1,231,321</span>
            </div>
            <div class="expenseNumber Left">
              <span class="expenseNumberTitle">维保费用</span>
              <span class="expenseNumberFont">1,231,321</span>
            </div>
            <div class="expenseNumber Middle">
              <span class="expenseNumberTitle">车辆购置费用</span>
              <span class="expenseNumberFont">1,231,321</span>
            </div>
            <div class="expenseNumber Right">
              <span class="expenseNumberTitle">其他费用</span>
              <span class="expenseNumberFont">1,231,321</span>
            </div>
          </div>
        </el-main>
        <el-main>
          <div class="theBlock">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">保险费用统计</span>
              </template>
              <template #last>
                <span class="theLast">车辆保险费用统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <ShadePie :data=dataShadePieOne />
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">其他综合费用统计</span>
              </template>
              <template #last>
                <span class="theLast">车辆其他费用统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <ShadePie :data=dataShadePieTwo />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
      </el-container>
      <el-container>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="large" theType="thin">
              <template #first>
                <span class="theFirst">车辆购置费用及趋势统计</span>
              </template>
              <template #last>
                <span class="theLast">按照登记时间且车辆获取方式为购买的车辆价格及趋势统计</span>
              </template>
            </TheTitle>
            <div
              style="width: 930px;display: flex;background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSinglePieOne />
              <MultiLines :data=dataSingleLineOne />
            </div>
          </div>
          <CuttingLine theSize="large" />
        </el-main>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="large" theType="thin">
              <template #first>
                <span class="theFirst">维保费用及趋势统计</span>
              </template>
              <template #last>
                <span class="theLast">车辆加油/维保/保险费用及趋势统计</span>
              </template>
            </TheTitle>
            <div
              style="width: 910px;display: flex;background: linear-gradient(to right, rgba(0, 132, 243, 0),rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSinglePieTwo />
              <MultiLines :data=dataSingleLineTwo />
            </div>
          </div>
          <CuttingLine theSize="large" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref, watch } from 'vue';
import { forwardTo } from '@/hook/forwardTo';

import TheTitle from '@/components/TheTitle.vue';
import CuttingLine from '@/components/CuttingLine.vue';
import TagsPie from '@/components/TagsPie.vue';
import SinglePie from '@/components/SinglePie.vue';
import MultiLines from '@/components/MultiLines.vue';
import ShadePie from '@/components/ShadePie.vue';

import PointerDown from '@/components/PointerDown.vue'

const dateStart = ref('')
const dateEnd = ref('')
const middleSelect = ref('')
const options = [
  {
    value: '石家庄',
    label: '石家庄'
  },
  {
    value: '',
    label: '清空选项'
  }
]
watch([dateStart, dateEnd],
  (newV) => {
    if ((newV[0] == '' || newV[1] == '') == false) {
      if (newV[0] > newV[1]) {
        console.log('开始时间不能晚于结束时间')
        dateStart.value = '';
        dateEnd.value = '';
      }
    }
  })

const dataCarsMaintenance = {
  data: [
    { value: 12454, name: '保养' },
    { value: 24908, name: '维修' }],
  sum: 37362,
  id: 'weiBao',
  type: 'value',
  theColorList: ['#35e0ff', '#ff7629',],
  sumOrSingle: '维保费用'
}

const dataCarsFuel = {
  data: [
    { value: 12454, name: '加油' },
    { value: 24908, name: '加电' }],
  sum: 37362,
  id: 'youDian',
  type: 'value',
  theColorList: ['#0085ff', '#31dea1',],
  sumOrSingle: '油电费用'
}

const dataShadePieOne = {
  id: 'shadePieOne',
  data: [
    {
      value: 12454, name: '车船使用税'
    }, {
      value: 13198, name: '交强险'
    }, {
      value: 14198, name: '商业险'
    }, {
      value: 15198, name: '其他'
    }
  ],
  sumName: {
    color: '#ffb874',
    value: '保险费用（元）：'
  },
  sum: 55048,
  theColorList: ['#33e1e1', '#ff6d00', '#0585fc', '#93bae7'],
  anotherColorList: ['#06263b', '#1a1920', '#011c40', '#10223c']
}

const dataShadePieTwo = {
  id: 'shadePieTwo',
  data: [
    {
      value: 12454, name: '路桥'
    }, {
      value: 13198, name: '停车费'
    }, {
      value: 14198, name: '油卡费'
    }, {
      value: 15198, name: '其他'
    }
  ],
  sumName: {
    color: '#83e8fe',
    value: '其他费用（元）：'
  },
  sum: 55048,
  theColorList: ['#3fca96', '#e3c882', '#7c4dfe', '#93bae7',],
  anotherColorList: ['#062331', '#17222f', '#0e1840', '#10223d']
}

const dataSinglePieOne = {
  id: 'singlePieOne',
  data: [
    {
      value: 12454, name: '财政拨款'
    }, {
      value: 13198, name: '自筹资金'
    }, {
      value: 14198, name: '专项资金'
    }, {
      value: 15198, name: '其他'
    }
  ],
  sum: 55048,
  theColorList: ['#006dee', '#404ecc', '#40cc97', '#e3c882'],
  type: 'percent',
  sumOrSingle: '车辆购置费用'
}


const dataSingleLineOne = {
  xAxisArr: ['一月', '二月', '三月', '四月', '五月', '六月',],
  legend: [],
  dataA: [60, 120, 160, 90, 50, 70],
  dataB: [],
  dataC: [],
  dataD: [],
  id: 'singleLineOne',
  theColorList: ['#46cccd', '#404ecc', '#40cc97', '#e3c882']
}

const dataSinglePieTwo = {
  id: 'singlePieTwo',
  data: [
    {
      value: 12454, name: '油电'
    }, {
      value: 13198, name: '保险'
    }, {
      value: 14198, name: '维保'
    }, {
      value: 15198, name: '其他'
    }
  ],
  sum: 55048,
  theColorList: ['#006dee', '#404ecc', '#40cc97', '#e3c882'],
  type: 'percent',
  sumOrSingle: '车辆购置费用'
}


const dataSingleLineTwo = {
  xAxisArr: ['一月', '二月', '三月', '四月', '五月', '六月',],
  legend: ['油电', '保险', '维保', '其他',],
  dataA: [60, 120, 160, 90, 50, 70],
  dataB: [70, 90, 80, 160, 90, 40],
  dataC: [40, 80, 60, 50, 160, 90],
  dataD: [120, 70, 70, 150, 70, 80],
  id: 'singleLineTwo',
  theColorList: ['#35e0ff', '#e3c882', '#7c4dff', '#abd2ff']
}

</script>
<style scoped>
.expenseMiddle {
  width: 840px;
  height: 530px;

  position: relative;
  display: flex;
  justify-content: center;

  background-image: url('@/assets/images/expenseMiddle.png');
  background-position: center center;
}

.expenseNumberTitle {
  font-size: 16px;
  background: linear-gradient(to top, #6DB9FF, #ffffff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.expenseNumber {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: absolute;

  font-weight: bold;
}

.Left {
  bottom: 95px;
  left: 62px;
}

.Middle {
  bottom: -8px;
  left: 367px;
}

.Right {
  bottom: 95px;
  right: 60px;
}

.expenseNumberFont {
  font-family: '优设标题黑';
  font-size: 24px;
  color: #ffffff;
}
</style>
